<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="员工" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入员工名"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="负责人" prop="principalName">
        <el-input
          v-model="queryParams.principalName"
          placeholder="请输入负责人"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="日期段">
        <el-date-picker
          v-model="queryDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryFn">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryFn">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddFn" v-hasPermi="['pmp:workhour:add']">工时填报</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddFn"
          v-hasPermi="['pmp:workhour:add']"
        >工时填报</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdateFn"
          v-hasPermi="['pmp:workhour:edit']"
        >工时修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDeleteFn"
          v-hasPermi="['pmp:workhour:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExportFn"
          v-hasPermi="['pmp:workhour:export']"
        >发送周报</el-button>
      </el-col>
    </el-row> -->
    <el-table v-loading="loading" :data="workhourList" @selection-change="handleSelectionChangeFn">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="项目" prop="projectName" :show-overflow-tooltip="true" width="200" />
      <el-table-column label="员工" prop="nickName" width="110" />
      <el-table-column label="负责人" prop="principalName" width="110" />
      <el-table-column label="销售员" prop="salemanName" :show-overflow-tooltip="true" width="110" />
      <el-table-column label="工时分类" :show-overflow-tooltip="true" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.workTypeSecond }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务描述" prop="workDesc" :show-overflow-tooltip="true" />
      <el-table-column label="日期" prop="startDate" :show-overflow-tooltip="true" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startDate,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="startTime" :show-overflow-tooltip="true" width="80" />
      <el-table-column label="结束时间" prop="endTime" :show-overflow-tooltip="true" width="80" />
      <el-table-column label="工时" prop="workHourCount" :show-overflow-tooltip="true" width="50" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdateFn(scope.row)"
            v-hasPermi="['pmp:workhour:edit']"
          >修改</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteFn(scope.row)"
            v-hasPermi="['pmp:workhour:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListFn"
    />

    <workhour-detail ref='detail' :title='workhourData.title' :propFormData.sync="workhourData.formData" ></workhour-detail>
  </div>
</template>

<script>
  import { apiWorkhourDel, apiGetHourList, apiWeekReportSend, apiWeekEmailAdd } from "@/api/pmp/api.workhour";
  import workhourDetail from './components/workhour.detail.vue';

  export default {
    name: "workhour",
    components: {
      workhourDetail
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 角色表格数据
        workhourList: [],
        // 详情页数据
        workhourData: {
          title: "添加角色",
          formData: undefined
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roleName: undefined,
          roleKey: undefined,
          status: undefined
        },
        // 工时类型数据字典
        typeOptions: [],
        // 时间框查询数据集
        queryDate: []
      };
    },
    filters: {
      fltValue (val) {
        return val?'是':'否';
      }
    },
    computed: {
      cptWorkType () {
        return (first,second)=> {
          return (first && second? (first || '--') + '/' + (second || '--') : '' );
        };
      }
    },
    created() {
      this.getListFn();
      this.apiGetDicts("technology_post_type").then(response => {
        this.typeOptions = response.data;
      });
    },
    methods: {
      /** 查询角色列表 */
      getListFn() {
        let query = {...this.queryParams};
        this.loading = true;
        if(this.queryDate || this.queryDate.length > 2){
          query.beginTime = this.queryDate[0];
          query.endTime = this.queryDate[1];
        }
        apiGetHourList(query).then(
          response => {
            this.workhourList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQueryFn() {
        this.queryParams.pageNum = 1;
        this.getListFn();
      },
      /** 重置按钮操作 */
      resetQueryFn() {
        this.queryDate = [];
        this.resetForm("queryForm");
        this.handleQueryFn();
      },
      // 多选框选中数据
      handleSelectionChangeFn(selection) {
        this.ids = selection.map(item => item.workHourId);
        this.single = selection.length!=1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAddFn() {
        // this.workhourData = {
        //   title: "添加工时",
        //   formData: {
        //     workHourId: undefined,
        //     projectId: undefined,
        //     workType: "1",
        //     projectType: 1,
        //     startDate: undefined,
        //     inside: "0",
        //     startTime: "9:00:00",
        //     endTime: "18:00:00",
        //     workHourCount: "0",
        //     workDesc: undefined
        //   }
        // };
        // this.$refs.detail.openDetail();
        this.$router.push({ name: 'workhourEditor'});
      },
      /** 修改按钮操作 */
      handleUpdateFn(row) {
        let form = {};
        const workHourId = row.workHourId || this.ids;
        form = this.workhourList.find(item => item.workHourId == workHourId);
        form.workType = form.workType + "";
        form.timeData = [form.startTime, form.endTime];
        this.workhourData.title = "修改工时";
        this.workhourData.formData = {...form};
        this.workhourData.formData.workTypeSecondId = parseInt(form.workTypeSecondId);
        this.$refs.detail.openDetail();
      },
      /** 删除按钮操作 */
      handleDeleteFn(row) {
        const workHourIds = row.workHourId || (this.ids || []).join(',');
        this.$confirm('确定删除当前选中的工时信息吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return apiWorkhourDel(workHourIds);
        }).then(() => {
          this.getListFn();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      }
    }
  };
</script>
